<script type="text/javascript">
    var options = {
        axis: "0 0 1 1", // Where to put the labels (trbl)
        axisxstep: 16, // How many x interval labels to render (axisystep does the same for the y axis)
        shade: true, // true, false
        smooth: false, //曲线
        symbol: "circle",
        colors: ["#F44"]
    };

    $(function () {

        // Make the raphael object
        var r = Raphael("chartHolder");

        var lines = r.linechart(
            20, // X start in pixels
            10, // Y start in pixels
            600, // Width of chart in pixels
            400, // Height of chart in pixels
            [.5, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5], // Array of x coordinates equal in length to ycoords
            [7, 11, 9, 16, 3, 19, 12, 12, 15], // Array of y coordinates equal in length to xcoords
            options // opts object
        );

        // Modify the x axis labels
        var xText = lines.axis[0].text.items;
        for (var i in xText) { // Iterate through the array of dom elems, the current dom elem will be i
            var _oldLabel = (xText[i].attr('text') + "").split('.'), // Get the current dom elem in the loop, and split it on the decimal
                _newLabel = _oldLabel[0] + ":" + (_oldLabel[1] == undefined ? '00' : '30'); // Format the result into time strings
            xText[i].attr({'text': _newLabel}); // Set the text of the current elem with the result
        }
        ;
    });
</script>

<div id="chartHolder" style="width: 650px;height: 450px"></div>
